<template>


  <el-table :data="tableData" stripe height="250">
    <el-table-column prop="userId" label="userId" width="140"/>
    <el-table-column prop="username" label="username" width="120"/>
    <el-table-column prop="addtime" label="addtime"/>
    <el-table-column fixed="right" label="Operations" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="showDetail(scope.row)"
        >Detail
        </el-button
        >
        <el-button link type="primary" size="small">Edit</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="demo-pagination-block">
    <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[5, 20, 100]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        v-model:total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

  <el-dialog :title="detail.username" v-model="detailVisible" width="300px">
    <p>id：{{ detail.userId }}</p>
    <p>姓名：{{ detail.username }}</p>
    <p>时间：{{ detail.addtime }}</p>
    <el-button @click="detailVisible = false">关闭</el-button>
  </el-dialog>
</template>

<script>
import {ElLoading, ElMessageBox} from "element-plus";
import {selectPage} from "@/api/server";
import {Document, Setting, UserFilled} from "@element-plus/icons-vue";

export default {
  name: "RoleManager"
  ,
  data() {
    return {
      tableData: [],
      currentPage4: 1,
      pageSize4: 5,
      total: 0,
      small: false,
      background: false,
      disabled: false,

      detail: {},
      detailVisible: false

    };
  },
  methods: {
    showMessageError() {
      ElMessageBox.confirm("Incorrect password. Please try again.", "Error", {
        confirmButtonText: "OK",
        cancelButtonText: "Cancel",
        showCancelButton: false,
        type: "error",
        center: true,
      }).then(() => {
        // User clicked "OK" (confirm button).
        // You can perform additional actions here if needed.
      }).catch(() => {
        // User clicked "Cancel" or closed the dialog.
        // You can perform additional actions here if needed.
      });
    },

    // handleOpen(key, keyPath) {
    //   console.log(key, keyPath)
    // },
    // handleClose(key, keyPath) {
    //   console.log(key, keyPath)
    // },
    // removeData() {
    //   localStorage.removeItem("token");
    // },

    showDetail(row) {
      this.detail = row;
      this.detailVisible = true;
    },

    handleSizeChange(number) {
      //设置分页大小
      console.log(number);
      this.initData();
    },
    handleCurrentChange(number) {
      //跳转到页
      console.log(number);
      this.initData();
    },

    initData() {

      //loading
      const loadingInstance = ElLoading.service({fullscreen: true})

      var response = selectPage(this.pageSize4, this.currentPage4,'');
      response.then((res) => res.data)//数据过滤，只要后端返回的data数据
          .then((res) => {
            console.log(res);
            this.tableData = res.data.list;
            this.total = parseInt(res.data.total);

          })
          .catch((err) => {
            console.log(err);
          })
          .finally(
              () => {
                loadingInstance.close()
              }
          )
      ;
      console.log("initData end!!! 验证axios 是个阻塞方法");

    }

  },
  mounted() {
    console.log("ok");
    this.initData();
  },
  components: [
    Setting, UserFilled, Document
  ]
}
</script>

<style scoped>

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
